<script setup>
const emit = defineEmits(["physicalModel", "edit", "remove", "view"]);

/**
 * 传入数据
 */
const props = defineProps({
  item: {
    type: Object,
    default: () => {},
  },
});
</script>
<template>
  <div class="text-box">
    <div class="title">{{ item.deviceName }}</div>
    <div class="top">
      <div class="top-left">
        <div class="txt-item">
          <div class="lebel">设备类型</div>
          <div class="value active">{{ item.deviceType }}</div>
        </div>
        <div class="txt-item">
          <div class="lebel">设备编码</div>
          <div class="value">{{ item.deviceCode }}</div>
        </div>
        <div class="txt-item">
          <div class="lebel">制造厂商</div>
          <div class="value" :title="item.factoryName">
            {{ item.factoryName }}
          </div>
        </div>
        <div class="txt-item">
          <div class="lebel">使用部门</div>
          <div class="value">{{ item.deviceDeptDict }}</div>
        </div>
      </div>
      <div class="top-right">
        <img v-lazy="item.fileImagePath" />
      </div>
    </div>
    <div class="buttom">
      <el-button
        type="primary"
        size="small"
        plain
        icon="edit"
        @click="emit('edit')"
        >编辑</el-button
      >
      <el-button
        type="warning"
        size="small"
        plain
        icon="view"
        @click="emit('view')"
        >详情</el-button
      >
      <el-button
        type="success"
        size="small"
        plain
        icon="guide"
        @click="emit('physicalModel')"
        >物模型</el-button
      >
      <!-- <el-button type="success" size="small" plain icon="scaleToOriginal"
        >采集详情</el-button
      > -->
      <el-button
        type="danger"
        icon="delete"
        size="small"
        circle
        @click="emit('remove')"
      />
    </div>
  </div>
</template>
<style scoped lang="scss">
.text-box {
  display: flex;
  flex-direction: column;
  border: 1px solid #d8dee5;
  border-radius: 3px;
  margin-bottom: 10px;
  font-size: 14px;
  .title {
    padding-left: 10px;
  }
  .top {
    padding: 10px;
    flex: 1;
    display: flex;
    justify-content: space-between;
    .top-left {
      .txt-item {
        margin-bottom: 10px;
        .lebel {
          display: inline-block;
          margin-right: 10px;
          color: #717c8e;
        }
        .value {
          display: inline-block;
          width: 200px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
    .top-right {
      flex: 1;
      max-width: 100px;
      max-height: 100px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .buttom {
    padding: 10px;
    flex: 0.5;
    padding-top: 10px;
    border-top: 1px solid #d7dadd;
  }
}

.active {
  color: #0070ff;
}
</style>
